import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Modal,
} from 'antd';

const FormItem = Form.Item;

// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
    static defaultProps = {
        handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
values: {},
};

constructor(props) {
    super(props);
    this.state = {
        formVals: {
            dept_id: props.values.props.dataRef.dept_id,
            dept_name: props.values.props.dataRef.dept_name,
            dept_code: props.values.props.dataRef.dept_code,
            parentid: props.values.props.dataRef.parentid,
            levelcode: props.values.props.dataRef.levelcode,
            key: props.values.props.dataRef.dept_id,
            title: props.values.props.dataRef.title,
        },
    };
}

 handleLocalUpdate = () => {
    const { form, handleUpdate,values } = this.props;
    const { formVals: oldValue } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue };
      this.setState(
        {
          formVals,
        }
      );
     
     handleUpdate(values,formVals);

    });
  };


renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical">

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
                    <FormItem  label="部门名称">
                        {form.getFieldDecorator('title', {
                        rules: [{ required: true, message: '请输入部门名称！', min: 1 }],
                        initialValue: formVals.title,
                        })(<Input placeholder="请输入" />)}
                    </FormItem>
                    </Col>
                    <Col  md={12} sm={24}>
                    <FormItem  label="部门代码">
                        {form.getFieldDecorator('dept_code', {
                        rules: [{ required: true, message: '请输入部门代码！', min: 1 }],
                        initialValue: formVals.dept_code,
                        })(<Input placeholder="请输入" />)}
                    </FormItem>
                    </Col>

                </Row>  
    </Form>
);

};



render() {
    const { updateModalVisible, handleUpdateModalVisible, values} = this.props;
    const {  formVals } = this.state;

    return (
        <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="修改"
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals)}
</Modal>
);
}

}

export default UpdateForm;